<template>
  <div class="go-overlay" :class="{ show: died }">
    <h2>Game Over</h2>
    <p class="score">
      您的得分: <span class="highlight">{{ prettifyScore(score) }}</span>
      <br />
      <img src="/gold.svg" style="height: 40px; vertical-align: middle" />
      <count-to
        :startVal="startMoney"
        :endVal="endMoney"
        :duration="4000"
        autoplay
      ></count-to
      >+
      <count-to
        :startVal="plusMoneyStart"
        :endVal="plusMoneyEnd"
        :duration="4000"
        autoplay
      ></count-to>
    </p>
    <div class="username-container" v-if="noUsername">
      <p>要将您的分数列入排行榜，请输入您的用户名：</p>
      <v-text-field
        v-model="settings.username"
        hide-details="auto"
        color="rgb(182, 227, 196)"
      ></v-text-field>
    </div>
    <ButtonSlash :disable="disable" text="返回" @click="$emit('reset')" />
  </div>
</template>

<script setup lang="ts">
import ButtonSlash from './ButtonSlash.vue';
import { ref } from 'vue';
import { CountTo } from 'vue3-count-to';
import { prettifyScore } from '~/libs/helpers';
import { useGlobalStore } from '~/libs/stores/global';

const globalStore = useGlobalStore();

const props = defineProps(['died', 'score', 'settings']);
defineEmits(['reset']);

const disable = ref(true);
const noUsername = ref(!props.settings.username);

const startMoney = globalStore.money;
let endMoney = globalStore.money;
const plusMoneyStart = props.score;
let plusMoneyEnd = props.score;

const moneyChange = () => {
  globalStore.money += props.score;
  plusMoneyEnd = 0;
  endMoney = globalStore.money;
};
setTimeout(moneyChange, 500);

setTimeout(() => {
  disable.value = false;
}, 700);
</script>

<style scoped lang="scss">
.go-overlay {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  z-index: 4;
  backdrop-filter: blur(6px);
  animation: fade-in 500ms ease forwards;
  background-color: rgba(#000, 0.6);
  padding-bottom: 15%;
  width: 100%;
  height: 100%;

  @media (max-width: 768px) {
    gap: 5px;

    p {
      margin-bottom: 5px;
    }
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

h2 {
  position: relative;
  font-weight: 400;
  font-size: 48px;
  font-family: 'Bree serif';
  letter-spacing: 3px;

  &::after {
    display: block;
    position: absolute;
    top: 55%;
    left: -30px;
    z-index: -1;
    animation: title-slash 1000ms cubic-bezier(0.22, 0.82, 0.79, 0.91) 700ms
      forwards;
    box-shadow: 0 0 3px 0 #000;
    border-radius: 50px;
    background-color: #e0e0e0;
    width: 0;
    height: 2px;
    content: '';
  }
}

@keyframes title-slash {
  0% {
    width: 0;
  }
  50% {
    left: -30px;
    width: calc(100% + 60px);
  }
  100% {
    left: calc(100% + 30px);
    width: 0px;
  }
}

.score {
  margin-bottom: 60px;
  font-weight: 500;
  font-size: 24px;

  .highlight {
    margin-left: 5px;
    color: var(--primary);
  }
}
</style>
